/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-13 14:56:49
 * @LastEditTime: 2023-03-27 14:35:44
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Button,
  Flex,
  Heading,
  Text,
  useClipboard,
  useColorModeValue,
} from '@chakra-ui/react';
import { QRCodeSVG } from 'qrcode.react';
import { RiFileCopy2Line } from 'react-icons/ri';

import { useAppSelector } from '@/store/hooks';

export default function Code() {
  const { recommendInfo } = useAppSelector((store) => store.profile);

  const code = recommendInfo.code;

  const url = `${location.origin}/registry?code=${code}`;
  const { onCopy: onCodeCopy, hasCopied: codeHasCopied } = useClipboard(
    code || ''
  );
  const { onCopy: onUrlCopy, hasCopied: urlHasCopied } = useClipboard(
    url || ''
  );
  const url_bg = useColorModeValue('whiteAlpha.400', 'gray.900');
  const btn_color = useColorModeValue('gray.600', 'gray.500');
  const btn_bg_color = useColorModeValue('white', 'dark');
  return (
    <Flex justify="flex-start" w="full" gap="4" p="3" direction="column">
      <Heading>邀请码</Heading>
      <Flex bg={url_bg} shadow="xl" p="4" rounded="3xl" direction="column">
        <Flex
          direction="column"
          py="6"
          alignSelf="center"
          align="center"
          justify="center"
        >
          <Flex
            shadow="xl"
            w="max-content"
            p="3"
            border="1px solid"
            borderColor={useColorModeValue('gray.800', 'gray.500')}
            rounded="lg"
          >
            <QRCodeSVG value={url} />
          </Flex>
          <Text mt="4">{url}</Text>
          <Button
            w="max-content"
            px="6"
            rounded="full"
            minW="6rem"
            color={btn_color}
            onClick={onUrlCopy}
            leftIcon={<RiFileCopy2Line />}
          >
            {urlHasCopied ? '已复制!' : '复制链接'}
          </Button>
        </Flex>
        <Flex
          gap="2"
          direction="column"
          p="4"
          pb="6"
          align="center"
          position="relative"
        >
          <Text w="full" fontWeight="600" fontSize="lg" textAlign="center">
            {code}
          </Text>
          <Button
            w="max-content"
            px="6"
            rounded="full"
            boxShadow="0 0 20px rgba(0,0,0,.089)"
            minW="6rem"
            color={btn_color}
            position="absolute"
            onClick={onCodeCopy}
            bottom="-2rem"
            zIndex="5"
            leftIcon={<RiFileCopy2Line />}
            className={`btn-bg-${btn_bg_color}-important`}
          >
            {codeHasCopied ? '已复制!' : '复制邀请码'}
          </Button>
        </Flex>
      </Flex>
    </Flex>
  );
}
